
<template>
  <div class="h-full flex flex-col bg-gray-100">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center justify-between px-4">
      <button @click="goBack" class="text-white">
        <i class="fas fa-chevron-left text-lg"></i>
      </button>
      <h2 class="text-lg font-semibold">朋友圈</h2>
      <button class="text-white">
        <i class="fas fa-camera text-lg"></i>
      </button>
    </div>

    <!-- 朋友圈内容 -->
    <div class="flex-1 overflow-y-auto">
      <!-- 封面和个人信息 -->
      <div class="relative mb-4">
        <div class="h-48 bg-gradient-to-b from-gray-300 to-gray-400"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4">
          <div class="flex justify-end items-end">
            <div class="text-right">
              <h3 class="text-white font-semibold text-lg">{{ user.nickname }}</h3>
              <p class="text-white text-sm opacity-80">微信号: {{ user.username }}</p>
            </div>
            <img 
              :src="user.avatar" 
              :alt="user.nickname"
              class="w-16 h-16 rounded ml-3 border-2 border-white"
            >
          </div>
        </div>
      </div>

      <!-- 动态列表 -->
      <div class="space-y-4 px-4 pb-4">
        <MomentCard 
          v-for="moment in moments" 
          :key="moment.id"
          :moment="moment"
          @like="handleLike"
          @comment="handleComment"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore, useDiscoverStore } from '@/stores'
import MomentCard from '@/components/discover/MomentCard.vue'

const router = useRouter()
const userStore = useUserStore()
const discoverStore = useDiscoverStore()

const user = computed(() => userStore.user)
const moments = computed(() => discoverStore.moments)

const goBack = () => {
  router.back()
}

const handleLike = (momentId: string) => {
  discoverStore.likeMoment(momentId, user.value.id)
}

const handleComment = (momentId: string, comment: any) => {
  discoverStore.addComment(momentId, comment)
}
</script>
